<template>
    <div class="home-div">
        <div class="left-view">
            <div>
                <div class="titleOne">{{ titles[0] }}</div>
                <!-- {{ networkTime }} -->
                <base-view @onSelectChange="onBaseSelectChange"></base-view>
            </div>
            <div>
                <div class="titleOne">{{ titles[1] }}</div>
                <user-view @onSelectChange="onUserSelectChange"></user-view>
            </div>
        </div>
        <div class="list-view">
            <list-view @onUpdateChange="onUpdateChange" @captureAndDownload="captureAndDownload"></list-view>
        </div>
        <div class="right-view" ref="captureRef">
            <right-view :fromData="fromData"></right-view>
        </div>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import baseView from "./view/base-view.vue";
import userView from "./view/user-view.vue";
import listView from "./view/list-view.vue";
import rightView from "./view/right-view.vue";
import html2canvas from "html2canvas";
import {onMounted, onUnmounted} from "vue";
import {GetCurrentTimeStr, isValidTimeInterval, getTimeFromWorldTimeAPI} from "@/utils/dateUtils";
import router from "@/router";
import store from "@/store";

const titles = reactive(["页面基础设置", "用户设置", "内容列表"]);

const fromData = reactive({
    navigationTime: "12:30",
    quantityOfElectricity: 40,
    adminNameFont: '"华文中宋", "STZhongsong", serif',
    adminIdFont: '"微软雅黑", "Microsoft YaHei", "PingFang SC", sans-serif',
    adminFsFont: '"华文中宋", "STZhongsong", serif',
    dateFont: "宋体, SimSun, sans-serif",
    qipaoFont: "宋体, SimSun, sans-serif",
    userName: "张三",
    onTextEditText: "当前在线",
    isShowDian: 1,
    avatarUrl: "",
    listData: [],
});

const onBaseSelectChange = (options) => {
    fromData.navigationTime = options.navigationTime;
    fromData.quantityOfElectricity = options.quantityOfElectricity;
    fromData.adminNameFont = options.adminNameFont;
    fromData.adminIdFont = options.adminIdFont;
    fromData.adminFsFont = options.adminFsFont;
    fromData.dateFont = options.dateFont;
    fromData.qipaoFont = options.qipaoFont;
};
const onUserSelectChange = (options) => {
    fromData.userName = options.userName;
    fromData.onTextEditText = options.onTextEditText;
    fromData.onTextEditText = options.onTextEditText;
    fromData.avatarUrl = options.avatarUrl;
    fromData.isShowDian = options.isShowDian;
    fromData.avatarUrl2 = options.avatarUrl2;
};

const onUpdateChange = (options) => {
    fromData.listData = options;
};
/**
 * 日期相关
 */
const networkTime = ref("");
onMounted(async () => {
    jiaoyan();
});

const jiaoyan = async () => {
    networkTime.value = await getTimeFromWorldTimeAPI();
    console.log("networkTime", networkTime.value);
    const isValid = isValidTimeInterval(GetCurrentTimeStr(), GetCurrentTimeStr(networkTime.value));
    if (!isValid) {
        //相差10分钟退出登录
        store.commit("updateToken", "");
        router.push("/pws");
    }
};

// 半小时的毫秒数
const halfHourInMilliseconds = 30 * 60 * 1000;

// 设置定时器
const intervalId = setInterval(jiaoyan, halfHourInMilliseconds);

// 组件卸载时清除定时器，避免内存泄漏
onUnmounted(() => {
    clearInterval(intervalId);
});

/**
 * 截图
 */
// 引用要截图的节点
const captureRef = ref(null);

// 定义截图并下载的函数
const captureAndDownload = async () => {
    if (captureRef.value) {
        try {
            console.log("window.devicePixelRatio", window.devicePixelRatio);

            // 使用 html2canvas 将节点转换为 canvas，设置 scale 参数提高清晰度
            const canvas = await html2canvas(captureRef.value, {
                // scale: window.devicePixelRatio, // 提高截图的分辨率
                scale: 10, // 提高截图的分辨率
                useCORS: true, // 允许跨域图片
                allowTaint: false, // 禁止污染画布
                logging: false, // 关闭日志
                backgroundColor: null, // 透明背景
            });
            // 将 canvas 转换为 base64 格式的图片数据
            const dataUrl = canvas.toDataURL("image/png");
            // 将 base64 数据转换为 Blob 对象
            const byteCharacters = atob(dataUrl.split(",")[1]);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], {type: "image/png"});

            // 创建一个临时的下载链接
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "screenshot.png";
            // 触发点击事件进行下载
            a.click();
            // 释放临时的 URL 对象
            URL.revokeObjectURL(url);
        } catch (error) {
            console.error("截图并下载失败:", error);
        }
    }
    jiaoyan();
};
</script>

<style lang="less" scoped>
.home-div {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 10px;
    display: flex;

    .left-view {
        width: 500px;
        margin-right: 40px;
    }
    .list-view {
        width: 440px;
        margin-right: 40px;
        image-rendering: -moz-crisp-edges; /* Firefox */
        image-rendering: -webkit-optimize-contrast; /* Safari */
        image-rendering: crisp-edges; /* 标准语法 */
        -ms-interpolation-mode: nearest-neighbor; /* IE (旧版) */
    }

    .right-view {
        width: 300px;
        background-color: #f4f4f4;
        height: 600px;
    }
}
</style>
